<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_watch实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
   <!--
        computed与watch的区别：
            1、computed能完成的功能watch都可以完成
            2、watch能完成的功能computed不一定能完成，例如：watch可以进行异步操作。
        注意：
            1、所有被vue管理的函数，最好写成普通函数，这样this才能指向vm或组件实例对象。
            2、所有不被vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
   -->

  姓：<input type="text" v-model="firstName"/><br/>
  名：<input type="text" v-model="lastName"/><br/>
  <!--通过插值语法将函数表达式插入到这里-->
  全名：{{fullName}}</br>
</div>
</body>
<script type="text/javascript">
  var i =0;
  var vm = new Vue({
    el:'#root',
    /*data中的数据不管哪个数据发生了变化，Vue的模板就会重新解析一次*/
    data:{
      firstName:'张',
      lastName:'三',
      fullName:'张-三'
    },
    computed: {
        //实现1秒钟以后再修改fullName,但由于fullName的返回值为未定义，所以实现不了
        fullName () {
          setTimeout(()=>{
              //由于()=>没有this，所以会往上一级的函数找，fullName函数的this就是vue实例，所以此处的this是vue实例
              //失败的原因：是由于return的返回值给了()=>回调函数，fullName的返回值为空
              return this.firstName + '-' + this.lastName
          },1000)
        }
  },
    watch:{
        //可以实现1秒钟后再修改fullName
        firstName(newValue) {
            setTimeout(()=>{
                //能够实现是由于()=>没有this，只能往上一级函数找this，所以this就是vue实例
                this.fullName = newValue + '-' + this.lastName;
            },1000)
        },
        lastName(newValue){
            setTimeout(()=>{
                //能够实现是由于()=>没有this，只能往上一级函数找this，所以this就是vue实例
                this.fullName = this.firstName + '-' + newValue;
            },1000)
        }
    }
  })
</script>
</html>